<template>
  <div class="login">
    <div class="loginInfo">
      <div class="head">
        <span class="logo"><img src="@/assets/logo.png" alt="" /></span>
        <span>荷福-后台管理平台</span>
      </div>
      <form action="">
        <input
          @blur="Verifyemail"
          class="email"
          type="text"
          placeholder="请输入邮箱账号"
          v-model="email"
          v-bind:class="{ error: emailFlag }"
          @focus="reset"
        />
        <div class="emailTips tips">{{ emailmsg }}</div>
        <input
          class="password"
          type="password"
          placeholder="请输入密码"
          v-model="password"
          v-bind:class="{ error: passwordFlag }"
          @focus="reset"
          @blur="Verifypassword"

        />
        <div class="passwordEmail tips">{{ passwordmsg }}</div>
        <div class="loginbtn cp" @click="login">登录</div>
        <div class="forget cp" @click="forget">忘记密码</div>
      </form>
      <div class="footer">荷福集团上海研究院版权所有</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      email: '',
      password: '',
      emailmsg: '', // 邮箱的错误提示信息
      passwordmsg: '', // 密码的错误提示信息
      emailFlag: false, // 红色边框的消失于隐藏
      passwordFlag: false
    }
  },
  computed: {
    validate () {
      return !this.emailmsg && !this.passwordmsg && this.email && this.password
    }
  },
  methods: {
    login () {
      if (this.validate) {
        const params = {
          email: this.email,
          password: this.password
        }
        this.$store.dispatch('login/systemLoin', params).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.$router.push('/home')
            this.$message.success(res.message)
          }
        }).catch(res => {
          // console.log(res)
          if (res.indexOf('密码') !== -1) {
            this.passwordFlag = true
            this.passwordmsg = res
          } else if (res.indexOf('用户') !== -1) {
            this.emailmsg = res
            this.emailFlag = true
          } else {
            this.$message({
              type: 'error',
              message: res,
              duration: 1000
            })
          }
        })
      }
    },
    forget () {
      this.$router.push('/forget')
    },
    reset () {
      this.emailmsg = ''
      this.emailFlag = false
      this.passwordmsg = ''
      this.passwordFlag = false
    },
    Verifyemail () {
      const re = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
      if (this.email === '') {
        this.emailmsg = '请输入邮箱'
        this.emailFlag = true
      } else if (re.test(this.email)) {
        this.emailmsg = ''
      } else {
        this.emailmsg = '邮箱号码输入错误'
        this.emailFlag = true
      }
    },
    Verifypassword () {
      if (this.password === '') {
        this.passwordmsg = '请输入密码'
        this.passwordFlag = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background: url("~@/assets/login.png") no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;

  .loginInfo {
    position: absolute;
    width: 480px;
    height: 610px;
    opacity: 1;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0px 0px 24px 0px rgba(0, 44, 160, 0.13);
    top: 50%;
    transform: translateY(-50%);
    right: 210px;
    .head {
      margin-top: 104px;
      text-align: center;
      height: 28px;
      line-height: 28px;

      .logo {
        display: inline-block;
        width: 28px;
        height: 28px;

        img {
          width: 28px;
        }
      }
      span {
        vertical-align: top;
        margin-left: 14px;
        color: #304eec;
        font-size: 24px;
        font-weight: 500;
      }
    }
    form {
      text-align: center;
      margin-top: 90px;
      input {
        width: 360px;
        height: 44px;
        opacity: 1;
        background: #ffffff;
        border: 1px solid #c6ccd7;
        border-radius: 5px;
        outline: none;
        padding: 15px 10px;
      }
      .tips {
        margin-left: 60px;
        text-align: left;
        margin-top: 8px;
        color: #f05656;
        height: 14px;
        line-height: 14px;
      }
      .password {
        margin-top: 18px;
      }
      .loginbtn {
        display: inline-block;
        width: 360px;
        height: 44px;
        opacity: 1;
        background: #304eec;
        border-radius: 4px;
        color: #fff;
        line-height: 44px;
        margin-top: 32px;
      }
      .forget {
        margin-left: 300px;
        margin-top: 14px;
        color: #a5aebf;
      }
    }
    .footer {
      // margin-top: 98px;
      // margin-left: 149px;
      position: absolute;
      color: #a5aebf;
      left: 149px;
      bottom: 20px;
    }
  }
}
</style>
